<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI问题解答</title>
    <link href="../static/css/bootstrap5.min.css" th:href="@{/css/bootstrap5.min.css}" rel="stylesheet"/>
    <style>

        .chat-container {
            overflow-y: auto; /* 允许纵向滚动 */
            margin-bottom: 20px; /* 与输入框的间距 */
            padding: 10px;
            border: 1px solid #ccc; /* 边框 */
            border-radius: 6px; /* 圆角 */
            background-color: #f9f9f9; /* 背景色 */
        }

        .chat-message {
            margin-bottom: 10px; /* 每条消息之间的间距 */
            padding: 10px;
            border-radius: 6px;
        }

        .user-question {
            font-weight: bold; /* 用户问题加粗 */
            color: #007bff; /* 用户问题颜色 */
            background-color: #e9ecef; /* 用户问题背景颜色 */
            padding: 10px;
            border-radius: 6px;
        }

        .ai-response {
            margin-left: 10px; /* AI响应的左边距 */
            color: #333; /* AI响应颜色 */
            background-color: #f8f9fa; /* AI响应背景颜色 */
            padding: 10px;
            border-radius: 6px;
        }

        .loader {
            border: 4px solid #f3f3f3; /* 外部边框颜色 */
            border-top: 4px solid #3498db; /* 顶部边框颜色 */
            border-radius: 50%; /* 圆形 */
            width: 40px; /* 宽度 */
            height: 40px; /* 高度 */
            animation: spin 1s linear infinite; /* 动画 */
            margin: auto; /* 居中 */
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="/stock/getAverageHoldingPercentage">首页</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" aria-current="page" href="/stock/news">每日资讯</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" aria-current="page" href="/chat">AI问题解答</a>
                </li>
                <li class="nav-item" shiro:notAuthenticated>
                    <a class="nav-link" href="/login">登录</a>
                </li>
                <li class="nav-item" shiro:notAuthenticated>
                    <a class="nav-link" href="/register">注册</a>
                </li>
            </ul>
            <div id="userInfo" class="ms-auto" shiro:authenticated>
                <span class="nav-link" th:text="'欢迎，' + ${sysUser.userName}">用户昵称</span>
                <button class="nav-link btn btn-link" id="logoutButton">退出登录</button>
            </div>
        </div>

    </div>
</nav>
<div class="container-md border-top p-5">
    <div class="row justify-content-center">
        <h2 class="text-center">AI问题解答</h2>
        <div class="chat-container" id="chatContainer"></div>
        <div id="loading" style="display:none;">
            <div class="loader"></div> <!-- 使用加载动画 -->
        </div>
        <div class="mb-3">
            <input type="text" id="question" placeholder="请输入你的问题" aria-label="问题输入" class="form-control"/>
        </div>
        <div class="mb-3">
            <button class="btn btn-primary me-2" id="askButton" aria-label="提问按钮">提问</button>
            <button class="btn btn-secondary" id="newConversationButton" aria-label="新对话按钮">新对话</button>
        </div>

    </div>
</div>
<script th:src="@{/js/bootstrap5.min.js}"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
    document.getElementById('askButton').onclick = function () {
        const question = document.getElementById('question').value.trim();
        if (!question) {
            alert('请输入一个有效的问题。');
            return;
        }

        // 显示加载状态
        document.getElementById('loading').style.display = 'block';
        const askButton = document.getElementById('askButton');
        askButton.disabled = true; // 禁用按钮

        // 显示用户提问
        const chatContainer = document.getElementById('chatContainer');
        chatContainer.innerHTML += `<div class="chat-message"><span class="user-question">你：</span>${question}</div>`;

        fetch('/kimi/chat', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({question})
        })
            .then(response => response.json())
            .then(data => {
                // 将 Markdown 转换为 HTML

                const aiResponse = marked.parse(data.msg);

                // 显示AI回答
                chatContainer.innerHTML += `<div class="chat-message"><span class="ai-response">AI：</span>${aiResponse}</div>`;
                // 滚动到最新消息
                chatContainer.scrollTop = chatContainer.scrollHeight;
                // 清空输入框
                document.querySelector('#question').value = '';
            })
            .catch(error => {
                console.error('Error:', error);
                chatContainer.innerHTML += `<div class="chat-message"><span class="ai-response">AI：</span>请求失败，请稍后再试。</div>`;
            })
            .finally(() => {
                document.getElementById('loading').style.display = 'none'; // 隐藏加载状态
                askButton.disabled = false; // 启用按钮
            });
    };
    document.getElementById('newConversationButton').onclick = function () {
        const chatContainer = document.getElementById('chatContainer');
        chatContainer.innerHTML = ''; // 清空聊天容器
    };

</script>
</body>
</html>
